<template>
    <div>
<!--        <template v-if="commodityType === '1'">-->
            <Row class="specifications-item" :gutter="16">
                <Col span="6">
                    <FormItem label="选择属性组：" prop="specificationsList">
                        <Select v-model="specificationsId" @on-change="specificationsSelect()">
                            <Option v-for="item in specificationsList"
                                    :value="item.id"
                                    :key="item.id">{{ item.name }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="18">
                    <FormItem label="选择对应属性值:" prop="zz_source">
                        <CheckboxGroup v-model="checkbox1" @on-change="onChange1">
                            <Checkbox v-for="item in specificationsChildrenList" :key="item.id" :label="item.id" border>
                                <span>{{item.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
            </Row>
            <Row v-if="specificationsItem2 === '1'" class="specifications-item" :gutter="16">
                <Col span="6">
                    <FormItem label="选择属性组：" prop="specificationsList">
                        <Select v-model="specificationsId2" @on-change="specificationsSelect2()">
                            <Option v-for="item in specificationsList2"
                                    :value="item.id"
                                    :key="item.id">{{ item.name }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="18">
                    <FormItem label="选择对应属性值:" prop="zz_source">
                        <CheckboxGroup v-model="checkbox2" @on-change="onChange2">
                            <Checkbox v-for="item in specificationsChildrenList2" :key="item.id" :label="item.id" border>
                                <span>{{item.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
            </Row>
            <Row v-if="specificationsItem3 === '1'" class="specifications-item" :gutter="16">
                <Col span="6">
                    <FormItem label="选择属性组：" prop="specificationsList3">
                        <Select v-model="specificationsId3" @on-change="specificationsSelect3()">
                            <Option v-for="item in specificationsList3"
                                    :value="item.id"
                                    :key="item.id">{{ item.name }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="18">
                    <FormItem label="选择对应属性值:" prop="zz_source">
                        <CheckboxGroup v-model="checkbox3" @on-change="onChange3">
                            <Checkbox v-for="item in specificationsChildrenList3" :key="item.id" :label="item.id" border>
                                <span>{{item.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
            </Row>
            <Button style="margin-bottom: 20px" v-if="specificationsItem2 === '1'"  @click="generate" type="info">生成规格</Button>
            <Row>
<!--                <vxe-toolbar custom></vxe-toolbar>-->
                <vxe-table
                        border
                        row-key
                        ref="xTable"
                        class="sortable-row-demo"
                        align="center"
                        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, icon: 'md-clipboard'}"
                        header-align="center"
                        @edit-closed="editClosedEvent"
                        :data="tableData">
                    <vxe-table-column v-if="tableName1" field="tableKey1" :title="tableName1"></vxe-table-column>
                    <vxe-table-column v-if="tableName2" field="tableKey2" :title="tableName2"></vxe-table-column>
                    <vxe-table-column v-if="tableName3" field="tableKey3" :title="tableName3"></vxe-table-column>
<!--                    <vxe-table-column field="chicun" title="尺寸"></vxe-table-column>-->
<!--                    <vxe-table-column field="kuanshi" title="款式"></vxe-table-column>-->
                    <vxe-table-column field="stock" title="库存" :edit-render="{name: 'input'}"></vxe-table-column>
                    <vxe-table-column field="price" title="价格(元)" :edit-render="{name: 'input'}"></vxe-table-column>
                </vxe-table>
            </Row>
<!--            <Button @click="array" type="info">查看表格数据</Button>-->
<!--        </template>-->
<!--        <template v-if="commodityType === '0'">-->
<!--            <Row :gutter="16">-->
<!--                <Col span="6">-->
<!--                    <FormItem label="商品库存:" prop="stock">-->
<!--                        <div class="form-element">-->
<!--                            <Input v-model="formItem.stock" placeholder="请输入商品库存"/>-->
<!--                        </div>-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--                <Col span="6">-->
<!--                    <FormItem label="商品价格:" prop="price">-->
<!--                        <div class="form-element">-->
<!--                            <Input v-model="formItem.price" placeholder="0"><span-->
<!--                                    slot="append">元</span></Input>-->
<!--                        </div>-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--            </Row>-->
<!--        </template>-->
    </div>
</template>

<script>
import { propertyNameServiceList, propertyValueServiceList } from '@/api/shop'
export default {
  name: 'specifications',
  props: {
    formItem: {
      type: Object,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      loadingBtn: false,
      // formItem: {},
      specificationsList: [],
      specificationsChildrenList: [{ id: '', name: '请选择属性组' }],
      specificationsList2: [],
      specificationsChildrenList2: [{ id: '', name: '请选择属性组' }],
      specificationsList3: [],
      specificationsChildrenList3: [{ id: '', name: '请选择属性组' }],
      tableData: [{}],
      checkbox1: [],
      checkbox2: [],
      checkbox3: [],
      list1: [],
      list2: [],
      list3: [],
      tableName1: '',
      tableName2: '',
      tableName3: '',
      specificationsId: '',
      specificationsId2: '',
      specificationsId3: '',
      specificationsItem2: '0',
      specificationsItem3: '0'
    }
  },
  methods: {
    editClosedEvent ({ row, column }) {
      let xTable = this.$refs.xTable
      let field = column.property
      let cellValue = row[field]
      // 判断单元格值是否被修改
      if (xTable.isUpdateByRow(row, field)) {
        setTimeout(() => {
          this.$XModal.message({
            message: `局部保存成功！ ${field}=${cellValue}`,
            status: 'success'
          })
          // 局部更新单元格为已保存状态
          this.$refs.xTable.reloadRow(row, null, field)
        }, 300)
      }
      this.array()
    },
    array () {
      console.log(this.tableData)
      let arrayList = []
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].nameId1) {
          if (this.tableData[i].nameId2) {
            if (this.tableData[i].nameId3) {
              arrayList.push({
                id: this.tableData[i].id,
                stock: this.tableData[i].stock,
                price: this.tableData[i].price,
                sort: i,
                attrs: [
                  {
                    nameId: this.tableData[i].nameId1,
                    valueId: this.tableData[i].tableId1,
                    sort: '1'
                  },
                  {
                    nameId: this.tableData[i].nameId2,
                    valueId: this.tableData[i].tableId2,
                    sort: '2'
                  },
                  {
                    nameId: this.tableData[i].nameId3,
                    valueId: this.tableData[i].tableId3,
                    sort: '3'
                  }
                ]
              })
            } else {
              arrayList.push({
                stock: this.tableData[i].stock,
                price: this.tableData[i].price,
                id: this.tableData[i].id,
                sort: i,
                attrs: [
                  {
                    nameId: this.tableData[i].nameId1,
                    valueId: this.tableData[i].tableId1,
                    sort: '1'
                  },
                  {
                    nameId: this.tableData[i].nameId2,
                    valueId: this.tableData[i].tableId2,
                    sort: '2'
                  }
                ]
              })
            }
          } else {
            arrayList.push({
              stock: this.tableData[i].stock,
              price: this.tableData[i].price,
              id: this.tableData[i].id,
              sort: i,
              attrs: [
                {
                  nameId: this.tableData[i].nameId1,
                  valueId: this.tableData[i].tableId1,
                  sort: '1'
                }
              ]
            })
          }
        } else {
          arrayList.push({
            stock: this.tableData[i].stock,
            price: this.tableData[i].price,
            id: this.tableData[i].id,
            sort: i,
            attrs: []
          })
        }
      }
      console.log(arrayList, '@@@@@')
      this.formItem.skuList = arrayList
    },
    generate () {
      if (this.checkbox1.length > 3 || this.checkbox2.length > 3 || this.checkbox3.length > 3) {
        this.$Message.error({
          content: '最多可选3个属性值！'
        })
        return false
      }
      this.tableData = []
      for (let i = 0; i < this.list1.length; i++) {
        if (this.list2.length > 0) {
          for (let j = 0; j < this.list2.length; j++) {
            if (this.list3.length > 0) {
              for (let k = 0; k < this.list3.length; k++) {
                this.tableData.push({
                  tableKey1: this.list1[i].name,
                  tableKey2: this.list2[j].name,
                  tableKey3: this.list3[k].name,
                  tableId1: this.list1[i].id,
                  tableId2: this.list2[j].id,
                  tableId3: this.list3[k].id,
                  nameId1: this.list1[i].nameId,
                  nameId2: this.list2[j].nameId,
                  nameId3: this.list3[k].nameId
                })
              }
            } else {
              this.tableData.push({
                tableKey1: this.list1[i].name,
                tableKey2: this.list2[j].name,
                tableId1: this.list1[i].id,
                tableId2: this.list2[j].id,
                nameId1: this.list1[i].nameId,
                nameId2: this.list2[j].nameId
              })
            }
          }
        } else {
          this.tableData.push({
            tableKey1: this.list1[i].name,
            tableId1: this.list1[i].id,
            nameId1: this.list1[i].nameId
          })
        }
      }
      console.log(this.tableData, '++++++++++++++=')
    },
    //
    //
    // 第一组
    //
    //
    onChange1 (data) {
      console.log(data)
      if (data.length > 3) {
        this.$Message.error({
          content: '最多可选3个属性值！'
        })
      }
      console.log(this.specificationsChildrenList)
      this.list1 = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < this.specificationsChildrenList.length; j++) {
          if (this.specificationsChildrenList[j].id === data[i]) {
            this.specificationsChildrenList[j].nameId = this.specificationsId
            this.list1.push(this.specificationsChildrenList[j])
          }
        }
      }
      console.log(this.list1)
    },
    specificationsSelect (typee) {
      let newTypee = []
      if (typee !== undefined && typee !== '' && typee !== null) {
        for (let i = 0; i < typee.length; i++) {
          newTypee.push(typee[i].valueId)
        }
        this.checkbox1 = newTypee
      } else {
        this.checkbox1 = []
      }
      this.specificationsItem2 = '1'
      // console.log(this.specificationsList, '111')
      // console.log(this.specificationsId, '222')
      this.specificationsChildrenList = []
      this.list1 = []
      for (let i = 0; i < this.specificationsList.length; i++) {
        if (this.specificationsId === this.specificationsList[i].id) {
          this.propertyValueServiceList(this.specificationsList[i].id, newTypee)
          this.tableName1 = this.specificationsList[i].name
          // this.specificationsChildrenList = this.specificationsList[i].valueStr.split(',')
        }
      }
      this.specificationsAction2()
    },
    propertyValueServiceList (id, typee) {
      propertyValueServiceList({ propertyName: id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.specificationsChildrenList = data.data
          console.log(typee)
          if (typee !== undefined) {
            this.onChange1(typee)
          }
        } else {
          this.error(data)
        }
      })
    },
    specificationsAction () {
      propertyNameServiceList({ pageNo: '1', pageSize: '100' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.specificationsList = data.data
        } else {
          this.error(data)
        }
      })
    },
    //
    //
    // 第二组
    //
    //
    onChange2 (data) {
      console.log(data)
      if (data.length > 3) {
        this.$Message.error({
          content: '最多可选3个属性值！'
        })
      }
      console.log(this.specificationsChildrenList2)
      this.list2 = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < this.specificationsChildrenList2.length; j++) {
          if (this.specificationsChildrenList2[j].id === data[i]) {
            this.specificationsChildrenList2[j].nameId = this.specificationsId2
            this.list2.push(this.specificationsChildrenList2[j])
          }
        }
      }
      console.log(this.list2)
    },
    specificationsSelect2 (typee) {
      let newTypee = []
      if (typee !== undefined && typee !== '' && typee !== null) {
        for (let i = 0; i < typee.length; i++) {
          newTypee.push(typee[i].valueId)
        }
        this.checkbox2 = newTypee
      } else {
        this.checkbox2 = []
      }
      this.specificationsItem3 = '1'
      // console.log(this.specificationsList2, '111')
      // console.log(this.specificationsId2, '222')
      this.specificationsChildrenList2 = []
      for (let i = 0; i < this.specificationsList2.length; i++) {
        if (this.specificationsId2 === this.specificationsList2[i].id) {
          this.propertyValueServiceList2(this.specificationsList2[i].id, newTypee)
          this.tableName2 = this.specificationsList2[i].name
          // this.specificationsChildrenList = this.specificationsList[i].valueStr.split(',')
        }
      }
      this.specificationsAction3()
    },
    propertyValueServiceList2 (id, typee) {
      propertyValueServiceList({ propertyName: id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.specificationsChildrenList2 = data.data
          if (typee !== undefined) {
            this.onChange2(typee)
          }
        } else {
          this.error(data)
        }
      })
    },
    specificationsAction2 () {
      propertyNameServiceList({ pageNo: '1', pageSize: '100' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let arr = []
          for (let i = 0; i < data.data.length; i++) {
            if (this.specificationsId !== data.data[i].id) {
              arr.push(data.data[i])
            }
          }
          this.specificationsList2 = arr
        } else {
          this.error(data)
        }
      })
    },
    //
    //
    // 第三组
    //
    //
    onChange3 (data) {
      console.log(data)
      if (data.length > 3) {
        this.$Message.error({
          content: '最多可选3个属性值！'
        })
      }
      console.log(this.specificationsChildrenList3)
      this.list3 = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < this.specificationsChildrenList3.length; j++) {
          if (this.specificationsChildrenList3[j].id === data[i]) {
            this.specificationsChildrenList3[j].nameId = this.specificationsId3
            this.list3.push(this.specificationsChildrenList3[j])
          }
        }
      }
      console.log(this.list3)
    },
    specificationsSelect3 (typee) {
      let newTypee = []
      if (typee !== undefined && typee !== '' && typee !== null) {
        for (let i = 0; i < typee.length; i++) {
          newTypee.push(typee[i].valueId)
        }
        this.checkbox3 = newTypee
      } else {
        this.checkbox3 = []
      }
      // console.log(this.specificationsList3, '111')
      // console.log(this.specificationsId3, '222')
      this.specificationsChildrenList3 = []
      for (let i = 0; i < this.specificationsList3.length; i++) {
        if (this.specificationsId3 === this.specificationsList3[i].id) {
          this.propertyValueServiceList3(this.specificationsList3[i].id, newTypee)
          this.tableName3 = this.specificationsList3[i].name
          // this.specificationsChildrenList = this.specificationsList[i].valueStr.split(',')
        }
      }
    },
    propertyValueServiceList3 (id, typee) {
      propertyValueServiceList({ propertyName: id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.specificationsChildrenList3 = data.data
          if (typee !== undefined) {
            this.onChange3(typee)
          }
        } else {
          this.error(data)
        }
      })
    },
    specificationsAction3 () {
      propertyNameServiceList({ pageNo: '1', pageSize: '100' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let arr = []
          for (let i = 0; i < data.data.length; i++) {
            if (this.specificationsId !== data.data[i].id && this.specificationsId2 !== data.data[i].id) {
              arr.push(data.data[i])
            }
          }
          this.specificationsList3 = arr
        } else {
          this.error(data)
        }
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    // 规格属性组
    this.specificationsAction()
    this.specificationsAction2()
    this.specificationsAction3()
  },
  watch: {
    formItem (val) {
      console.log(val, '监听数据')
      this.formItem = val
      if (this.formItem.id && this.formItem.id !== '') {
        if (this.formItem.availableAttrs.length > 0) {
          if (this.formItem.availableAttrs[0]) {
            this.specificationsId = this.formItem.availableAttrs[0].nameId
            this.specificationsSelect(this.formItem.availableAttrs[0].valueList)
            // this.checkbox1 = this.formItem.availableAttrs[0].valueList
          }
          if (this.formItem.availableAttrs[1]) {
            this.specificationsId2 = this.formItem.availableAttrs[1].nameId
            this.specificationsSelect2(this.formItem.availableAttrs[1].valueList)
            // this.checkbox2 = this.formItem.availableAttrs[1].valueList
          }
          if (this.formItem.availableAttrs[2]) {
            this.specificationsId3 = this.formItem.availableAttrs[2].nameId
            this.specificationsSelect3(this.formItem.availableAttrs[2].valueList)
            // this.checkbox3 = this.formItem.availableAttrs[2].valueList
          }
        }
        if (this.formItem.newSkuList.length > 0) {
          this.tableData = this.formItem.newSkuList
        }
        if (this.formItem.skuList[0].attrs.length === 0) {
          this.tableData = [{ stock: this.formItem.skuList[0].stock, price: this.formItem.skuList[0].price }]
        }
      }
    }
  }
}
</script>

<style scoped>
    /*.specifications-item .ivu-form-item{*/
    /*    margin-bottom: 0;*/
    /*}*/
</style>
